import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs';
import {Tiles, Tile} from './Tiles.tsx';
import {
  AssetCollectionIcon,
  DateIcon,
  FileIcon,
  AttributeNumberIcon,
  AttributeTextIcon,
  IdIcon,
  MetricIcon,
  AssetsIcon,
} from '../../icons';
import {useTabBar} from "../../hooks/useTabBar";
import { Tooltip } from '../Tooltip/Tooltip';

<Meta
  title="Components/Tiles"
  component={Tiles}
  argTypes={{
    size: {control: {type: 'select'}, options: ['small', 'big']}, disabled: {control: {type: 'boolean'}},
  }}
  args={{size: 'small', disabled: false}}
/>

# Tiles

## Usage

The Tiles component provides the user a list of choices, for example, an attribute type, a template, or an export format.
It is a visual component made up of an icon and a label.

### Format

The component is displayed in a configurable responsive grid (width and gap). Tiles is a set of Tile.

## Playground

<Canvas>
  <Story name="Standard">
    {args => {
      const [isCurrent, switchTo] = useTabBar('Identifier');
      return <Tiles {...args} >
        <Tile icon={<AssetCollectionIcon/>} selected={isCurrent('Assets collection')} onClick={() => {switchTo('Assets collection')}}>
          Assets collection
        </Tile>
        <Tile icon={<DateIcon/>} selected={isCurrent('Date')} onClick={() => {switchTo('Date')}}>
          Date
        </Tile>
        <Tile icon={<FileIcon/>} selected={isCurrent('File')} onClick={() => {switchTo('File')}}>
          File
        </Tile>
        <Tile icon={<IdIcon/>} selected={isCurrent('Identifier')} onClick={() => {switchTo('Identifier')}}>
          Identifier
        </Tile>
        <Tile icon={<AssetsIcon/>} selected={isCurrent('Image')} onClick={() => {switchTo('Image')}}>
          Image
        </Tile>
        <Tile icon={<MetricIcon/>} selected={isCurrent('Measurement')} onClick={() => {switchTo('Measurement')}}>
          Measurement
        </Tile>
        <Tile icon={<AttributeTextIcon/>} selected={isCurrent('Text')} onClick={() => {switchTo('Text')}}>
          Text
          <Tooltip>
            This is a text
          </Tooltip>
        </Tile>
        <Tile icon={<AttributeNumberIcon/>} selected={isCurrent('Number')} onClick={() => {switchTo('Number')}} disabled>
          Number
          <Tooltip>
            This is a disabled number
          </Tooltip>
        </Tile>
      </Tiles>;
    }}
  </Story>
</Canvas>

<ArgsTable story="Standard" />

## Variation on size

<Canvas>
  <Story name="Size">
    {args => {
      return (
        <>
          <Tiles size={'small'}>
            <Tile icon={<AssetCollectionIcon/>}>
              Small Assets collection
            </Tile>
            <Tile icon={<DateIcon/>}>
              Small Date
            </Tile>
          </Tiles>
          <Tiles size={'big'}>
            <Tile icon={<AssetCollectionIcon/>}>
              Big Assets collection
            </Tile>
            <Tile icon={<DateIcon/>}>
              Big Date
            </Tile>
          </Tiles>
          <Tiles size={'small'} inline={true}>
              <Tile>
                Big Assets collection
                <Tooltip direction={'bottom'}>Big Assets collection</Tooltip>
              </Tile>
              <Tile>
                Big Date
                <Tooltip direction={'bottom'}>Big Date</Tooltip>
              </Tile>
            </Tiles>
          <Tiles size={'big'} inline={true}>
            <Tile>
              Big Assets collection
              <Tooltip direction={'bottom'}>Big Assets collection</Tooltip>
            </Tile>
            <Tile>
              Big Date
              <Tooltip direction={'bottom'}>Big Date</Tooltip>
            </Tile>
          </Tiles>
        </>
      );
    }}
  </Story>
</Canvas>
